<template>
	<div :class="curClassName" :style="curStyle">
		<van-swipe
			class="carsouel-container"
			:loop="true"
			:autoplay="swipeConfig.isAuto ? swipeConfig.timeSpan : 0"
		>
			<van-swipe-item
				v-for="item in swipeData"
				:key="item.key"
				class="swipe-item"
				@click="handleClick(item.value)"
			>
				<img
					class="app-carouse-img"
					v-if="item.type === 'img'"
					:src="item.value"
					@error="imgError"
				/>
				<i v-else-if="item.type === 'icon'" :class="item.value"></i>
			</van-swipe-item>
		</van-swipe>
	</div>
</template>
<script setup lang="ts">
import { Ref } from 'vue';
import { RawItemCarouselProps } from './rawitem-carousel';
import { IEvent } from '@/core';
const props = defineProps(RawItemCarouselProps);
interface RawItemCarouselEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const emit = defineEmits<RawItemCarouselEmit>();
/**
 * 项名称
 *
 * @memberof RawItemCarousel
 */
const itemName = computed(() => {
	return props.index || props.index === 0
		? `${props.name}_${props.index}`
		: props.name;
});

/**
 * 当前容器样式
 *
 * @memberof RawItemCarousel
 */
const curStyle = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	if (layoutModel) {
		return layoutModel.getElementStyle();
	}
});

/**
 * 类名
 *
 * @memberof RawItemCarousel
 */
const curClassName = computed(() => {
	const layoutModel = props.layoutModelDetails[itemName.value];
	const classNames = {
		'app-rawitem-carousel': true
	};
	if (layoutModel) {
		Object.assign(classNames, layoutModel.getClassNames());
	}
	return classNames;
});

/**
 * @description 轮播图图片所有项数据
 * @memberof RawItemCarousel
 */

const swipeData: Ref<any[]> = ref([]);

/**
 * @description 轮播图配置
 * @memberof RawItemCarousel
 */
const swipeConfig: Ref<any> = ref({});

/**
 * @description 设置轮播图配置
 * @param {*}
 * @memberof RawItemCarousel
 */
const setSwipeConfig = (data: any) => {
	const autoPlay: any =
		data.find((item: any) => Object.is(item.key, 'autoplay')) || {};
	const timeSpan: any =
		data.find((item: any) => Object.is(item.key, 'timespan')) || {};
	let isauto = false;
	let timespan = 0;
	if (autoPlay.value && Object.is(autoPlay.value, '1')) {
		isauto = true;
	}
	if (timeSpan.value) {
		timespan = Number(timeSpan.value);
	}
	return {
		isAuto: isauto,
		timeSpan: timespan,
	};
};

/**
 * @description 处理静态轮播图数据
 * @memberof RawItemCarousel
 */
const handleSwipData = (data: any[] = []) => {
	if (data && data.length > 0) {
		const configItem = data.findIndex((item: any) =>
			Object.is(item.key, 'autoplay')
		);
		if (configItem > -1) {
			// 有配置参数就截掉配置参数
			swipeData.value = data.slice(0, -2);
			swipeConfig.value = setSwipeConfig(data.slice(-2));
		} else {
			swipeData.value = data;
			swipeConfig.value = setSwipeConfig(data);
		}
	}
};

/**
 * @description 处理动态轮播图数据
 * @memberof RawItemCarousel
 */
const handDynaSwipData = (data: any[] = []) => {
	if (data && data.length > 0) {
		swipeConfig.value = setSwipeConfig(data);
		const tempData = data.filter((item: any) => {
			return (
				!Object.is(item.key, 'autoplay') && !Object.is(item.key, 'timespan')
			);
		});
		swipeData.value = [];
		tempData.forEach((item: any) => {
			if (item.value) {
				if (item.value.indexOf('fa fa-') < 0) {
					if (!item.type) {
						item.type = 'img';
					}
				} else if (!item.type) {
					item.type = 'icon';
				}
			}
			swipeData.value.push(JSON.parse(JSON.stringify(item)));
		});
	}
};

watch(
	() => props.value,
	(newVal: any, oldVal: any) => {
		//处理轮播图-静态数据
		if (props.type === 'STATIC_CAROUSEL') {
			handleSwipData(newVal);
		}
	},
	{ immediate: true, deep: true }
);

watch(
	() => props.data,
	(newVal: any, oldVal: any) => {
		//处理轮播图-动态数据
		if (props.type === 'FIELD_CAROUSEL') {
			const tempData = newVal[props.name];
			if (tempData) {
				if (typeof tempData === 'string') {
					const swipeData = JSON.parse(props.value as string);
					handDynaSwipData(swipeData);
				} else if (tempData instanceof Array) {
					handDynaSwipData(tempData);
				}
			}
		}
	},
	{ immediate: true, deep: true }
);

/**
 * img src错误
 *
 * @param {*} $event
 * @memberof RawItemCarousel
 */
const imgError = ($event: any) => {
	let img = $event.srcElement;
	if (img && !img.imgSign) {
		if (img && !img.imgSign) {
			img.src = 'assets/img/404.png';
			img.imgSign = true;
			img.imgSign = true;
		}
		img.onerror = null;
	}
};

/**
 * 轮播图项点击
 * @param value 
 */
 const handleClick = (value:string) => {
	emit('component-action', {
		name: props.name,
		action: 'panelItemClick',
		data: value,
	});
}
</script>
